import { useContext } from 'react';

import { ModalContext } from '@/shared/context/ModalContext';
import BookOpenImage from '@/shared/icons/emoji/open-book-image.png';
import { Modals } from '@/shared/interfaces';
import { Button, ButtonVariants, Modal } from '@/shared/ui';
import Image from 'next/image';

import cs from './SuccessModal.module.scss';

export const SuccessModal = () => {
  const { closeModal, data, setData, openModal } = useContext(ModalContext);
  const handleClose = () => {
    closeModal();
    setData(() => ({ ...data, id: undefined, email: undefined, courseName: undefined }));
  };
  return (
    <Modal className={cs.modal} isOpen onCloseClick={handleClose}>
      <div className={cs.container}>
        <div className={cs.image}>
          <Image alt="icon" fill quality={80} src={BookOpenImage} />
        </div>

        <div className={cs.text}>
          <div className={cs.title_container}>
            <h1 className={cs.title}>Поздравляем с покупкой!</h1>
            {!!data?.courseName && !data?.isFromSuccess && <p className={cs.info}>{data?.courseName}</p>}
          </div>
          {data?.isAuth ? (
            <p className={cs.description}>
              Вы купили материал «{data?.courseName}». <br />
              Желаем любви и успехов в родительстве. <br />
            </p>
          ) : (
            <p className={cs.description}>
              Вы купили материал «{data?.courseName}». <br />
              Отправили информацию на почту {data.email}. <br />
              Проверьте Входящие или&nbsp;Спам.
            </p>
          )}
        </div>

        <div className={cs.questions}>
          Если у вас есть вопросы,{' '}
          <Button
            className={cs.link}
            // href="/auth/help"
            // link
            onClick={() => openModal(Modals.FeedbackModal)}
            variant={ButtonVariants.Link}
          >
            напишите нам
          </Button>
        </div>
      </div>
    </Modal>
  );
};
